<template>
  <view class="cart-publish-wrap" >
         
    <view class="ceil" >
      <view class="label" >请上传彩票图片</view>
    </view>

    <!-- 图片上传 -->
    <view class="upload-box" >
     <view class="title">
       <text class="title-main" >一共需上传</text> <span class="right">{{info}}</span>  <text class="title-main" >张彩票</text>
       <text class="title-desc" >(请上传彩票图片)</text>
     </view>
     <!-- 上传组件 -->
     <view class="box-solid clearfix" >
       <!-- 图片展示区 -->
       <view class="img-box fl" v-for="(item, index) in imgCoverList" :key="index">
         <image @tap="previewCoverImage" class="img-file" :src="item.ticketsUrl"></image>
         <view @tap="handleCoverDelImg(item.uniqueCode,index)" class="iconfont icon-shanchu1 del" ></view>
         <text class="title-desc" >{{item.uniqueCode}}</text>
       </view>
       <view class="fl">
        <img-upload @listenImg="listenCoverImg" :count="1"></img-upload>
       </view>
     </view>
    </view>

  </view>
</template>

<script>
  import imgUpload from '@/components/img-upload-tickets.vue';
  import { ATTACHMENT_TYPE } from '@/api/home';
  import { GET_TICKETS_ORDER_CNT,REMOVE_TICKETS_IMG } from '@/api/tickets';
  import { CART_POST } from '@/api/order';
  import { momentTurn } from '@/tool';
  export default {
    components: {
      imgUpload
    },
    data() {
      return {
        type: '',
        timeShow: false,
        start_point: '',  //出发地
        destination: '',  //目的地
        startTime: '',
        endTime: '',
        startTimeStandard: '',
        endTimeStandard: '',
        fee: '',
        recruit_amount: '',
        imgList: [],
        imgCoverList: [],
        post_type: '',  //拼车id
        cost_explain: '', //其他说明
        car_pic: '',
        info:''
      }
    },
    onLoad() {
      this.getUnuploadCount();
    },
    methods: {
      getUnuploadCount(){
         this.$http.get(GET_TICKETS_ORDER_CNT , {
          })
          .then(res => {
            this.info =  res.data;
          })
      },
      listenImg(data) {
        // 上传处理
        this.imgList.push(data);
      },
      listenCoverImg(data) {
        // 上传处理
        this.imgCoverList.push(data);
        this.getUnuploadCount();
      },
      previewImage() {
        // 预览
        uni.previewImage({
          current: this.imgList[0],
          urls: this.imgList,
        });
      },
      previewCoverImage() {
        uni.previewImage({
          current: this.imgCoverList[0],
          urls: this.imgCoverList,
        });
      },
      handleDelImg(index) {
        this.imgList.splice(index, 1)
      },
      handleCoverDelImg(unitCode,index) {
          this.$http.post(REMOVE_TICKETS_IMG , {
            tickets_code:unitCode
          })
          .then(res => {
          if(res.code!==200){
             uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
          }
          })
        this.imgCoverList.splice(index, 1)
      },
      listenConfirmTime(data) {
        if(this.type === 'start') {
          this.startTime = data;
        }else if(this.type === 'end') {
          this.endTime = data;
        }
      },
      listenStandardDate(data) {
        if(this.type === 'start') {
          this.startTimeStandard = data;
        }else if(this.type === 'end') {
          this.endTimeStandard = data;
        }
      },
      feeInput(e) {
        const count = e.detail.value;
        let refundPostFee = count.match(/^\d*(\.?\d{0,2})/g)[0];
        if (count === refundPostFee) {
          this.fee = count;
        } else {
          refundPostFee = '';
          this.$nextTick(() => {
            this.fee = refundPostFee;
          });
        }
      },
    }

  }
</script>

<style lang="less" >
  .cart-publish-wrap{
    min-height: 100vh;
    padding-bottom: 150rpx;
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    background-color: #FFFFFF;
    .ceil{
      display: flex;
      align-items: center;
      padding: 24rpx;
      border-bottom: 1px solid #EEEEEE;
      .label{
        width: 260rpx;
        flex-shrink: 0;
      }
      .value{
        flex: 1;
      }
      .arrow{
        font-size: 32rpx;
        flex-shrink: 0;
        color: #999999;
      }
    }
    .img-box{
      position: relative;
      width: 200rpx;
      height: 200rpx;
      margin-right:30rpx;
      margin-top:30rpx;
      .img-file{
        width: 100%;
        height: 100%;
        border: 1px solid #EEEEEE;
      };
      .del{
        position: absolute;
        right: 0;
        top: 0;
        margin-right: -20rpx;
        margin-top: -20rpx;
        font-size: 36rpx;
        color: #ff0000;
      }
    }
    .img-upload_input {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      width: 200rpx;
      height: 200rpx;
      font-size: 40rpx;
      border: 1px solid #EEEEEE;
      margin-top:30rpx;
    }
    .upload-box{
      width: 710rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;

      .title{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .title-main{
          font-size: 28rpx;
          font-weight: 500;
        }
        .title-desc{
          font-size: 24rpx;
          margin-left: 16rpx;
          color: #999999;
        }
      }
      .box-solid{
        width: 100%;
        height: 100%;
        margin-left: 24rpx;
        border-radius: 12rpx;
       
      }
    }
  .right{
    text-align:right;
    font-size:18px;
    color:red;
    padding:5px;
  }
    .btn-box {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 136rpx;
      .cancel-btn {
        width: 710rpx;
        height: 92rpx;
        font-size: 32rpx;
        background-color: #fedd00;
      }
    }
  }
</style>
